<template>
	<view class="body" style="min-height: 1400rpx">
		<!-- <view class="header">我的购物车</view> -->

		<!-- 通知栏 -->
		<view class="notice-bar">
			<uni-notice-bar :speed="50" show-icon scrollable show-close :text="noticeText" v-show="noticeIsShow" />
		</view>

		<unicloud-db style="margin-top: 100rpx;" ref='udb' v-slot:default="{data, loading, error, options}"
			collection="shop-cart,opendb-mall-goods"
			field="goods_id._id,goods_id.name,goods_id.goods_price,goods_id.goods_banner_imgs">
			<view v-if="data==''">
				<image :src="'https://s1.ax1x.com/2022/08/01/vAILMF.png'" mode="aspectFill" class="empty-cart"></image>
			</view>
			<view v-for="(item,index) in data" :key="index">
				<view class="outer-box">
					<uni-row>
						<uni-col :span="2">
							<view>
								<view style="height: 90rpx;"></view>
								<uni-icons size="24" color="#F22D00" type="checkbox-filled" @click="checked(index)"
									v-show="ischecked[index]">
								</uni-icons>
								<uni-icons size="24" color="#9f9f9f" type="circle" @click="checked(index)"
									v-show="!ischecked[index]">
								</uni-icons>
							</view>
						</uni-col>
						<uni-col :span="8">
							<view class="outer-box" @click="clickGoods(item.goods_id[0]._id)">
								<image :src="item.goods_id[0].goods_banner_imgs[0].url"
									style="height: 200rpx;width: 200rpx;border-radius:18px"></image>
							</view>
						</uni-col>
						<uni-col :span="14">
							<view style="goods-name-box" @click="clickGoods(item.goods_id[0]._id)">
								<text style="font-size: 30rpx;">
									{{item.goods_id[0].name}}
								</text>
							</view>
							<view class="price-font-box">
								<view>
									<text class="yuan-font">￥</text>
									<text class="price-font">
										{{convert(item.goods_id[0].goods_price).integer}}.
									</text>
									<text class="price-font" style="font-size: 32rpx;">
										{{convert(item.goods_id[0].goods_price).point}}</text>
									<text class="x1">x1</text>
								</view>

								<uni-icons type="trash" size="30" @click="dele(item._id)" class="dele-item"
									color="#040100"></uni-icons>
							</view>
						</uni-col>
					</uni-row>
				</view>
			</view>
			<view style="height:100rpx;"></view>
		</unicloud-db>

		<view class="settlement">
			<view style="flex:2;">
				<view style="margin-left: 20rpx;display: flex;align-items: center;">

					<uni-icons size="24" color="#F22D00" type="checkbox-filled" @click="checkedAll"
						v-show="ischeckedall">
					</uni-icons>
					<uni-icons size="24" color="#9f9f9f" type="circle" @click="checkedAll" v-show="!ischeckedall">
					</uni-icons>

					<text>
						全选
					</text>
				</view>
			</view>
			<view style="flex:3;display: flex;align-items: center;position: relative;">
				<view style="width: auto">
					合计:￥
					<text class="price-font">
						{{convert(totalPrice).integer}}.
					</text>
					<text class="price-font" style="font-size: 32rpx;"> {{convert(totalPrice).point}}</text>
				</view>
				<view style="position: absolute;right: 5rpx;">
					<button @click="settlement">结 算</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const db = uniCloud.database();

	export default {
		data() {
			return {
				list: null,
				noticeIsShow: true,
				noticeText: '',
				goodsListIds: [],
				ischecked: [],
				ischeckedall: false,
				price: [],
				totalPrice: 0
			}
		},
		onShow() {
			this.notice()
			this.loadcart()
		},
		mounted() {
			this.notice()
			this.loadcart()
		},
		methods: {
			convert(money) {
				return {
					integer: Math.floor(money / 100),
					point: money % 100
				}
			},
			dele(id) {
				this.goodsListIds = []
				uni.showModal({
					title: '提示',
					content: '确定要删除这个宝贝',
					success: (res) => {
						if (res.confirm == true) {
							db.collection("shop-cart").doc(id).remove().then(res => {
								uni.showToast({
									title: '删除成功',
									duration: 800
								});
							})
							this.loadcart()
						}
					}
				})

			},
			async clickGoods(id) {
				let res = await uniCloud.importObject('goods').getById(id)
				uni.navigateTo({
					url: '/pages/details/details?item=' + encodeURIComponent(JSON.stringify(res[0]))
				})
			},
			async notice() {
				let res = await db.collection('notice-bar').where({
					area: 'cart'
				}).limit(1).get()
				this.noticeIsShow = res.result.data[0].is_show
				this.noticeText = res.result.data[0].text
				console.log('noticeText', this.noticeText);
			},
			async loadcart() {
				this.ischeckedall = false
				this.totalPrice = 0
				let res = await db.collection('shop-cart').where({
					user_id: uniCloud.getCurrentUserInfo().uid
				}).get()
				for (var i = 0; i < res.result.data.length; i++) {
					this.ischecked[i] = false
				}
				this.$refs.udb.refresh()
			},
			checked(index) {
				if (this.ischecked[index]) {
					this.ischecked[index] = false
					this.ischeckedall = false
					this.computePrice()
					return
				}
				this.ischecked[index] = true
				this.computePrice()
			},
			checkedAll() {
				if (this.ischeckedall == false) {
					for (var i = 0; i < this.ischecked.length; i++) {
						if (this.ischecked[i] != true) {
							this.ischecked[i] = true
						}
					}
					this.ischeckedall = true
					this.computePrice()
					return;
				}
				if (this.ischeckedall == true) {
					for (var i = 0; i < this.ischecked.length; i++) {
						this.ischecked[i] = false
					}
					this.ischeckedall = false
					this.computePrice()

					//清空
					this.goodsListIds = []
					this.$store.commit('setShoppingCartListIds', [])
					this.$store.commit('setGoodsIds', [])
					this.$store.commit('setTotalPrice', [])

					return;
				}
			},
			//计算选择的总计
			computePrice() {
				this.totalPrice = 0
				this.goodsListIds = []
				for (var i = 0; i < this.ischecked.length; i++) {
					if (this.ischecked[i] && this.$refs.udb.dataList[i] != null) {
						this.totalPrice += this.$refs.udb.dataList[i].goods_id[0].goods_price
						this.goodsListIds[i] = this.$refs.udb.dataList[i].goods_id[0]._id
					}
				}
				uni.showLoading({
					title: '请稍等...',
					mask: true,
					success: () => {
						this.$refs.udb.refresh()
					}
				});
				setTimeout(function() {
					uni.hideLoading();
				}, 1000);
			},
			// 结算
			async settlement() {
				//如果购物车没物品
				if (this.goodsListIds.length == 0) {
					uni.showModal({
						content: '请选择商品~',
						showCancel: false
					});
					return
				}

				//把选择的购物车id 放入vuex 便于下单后清除对应购物车商品
				let shoppingCartListIds = []
				let res = await db.collection('shop-cart').where({
					user_id: uniCloud.getCurrentUserInfo().uid,
					goods_id: db.command.in(this.goodsListIds)
				}).get()
				for (var i = 0; i < res.result.data.length; i++) {
					shoppingCartListIds[i] = res.result.data[i]._id
				}
				this.$store.commit('setShoppingCartListIds', shoppingCartListIds)
				//选择的商品存入vuex  方便进入订单页面后获取对应商品
				this.$store.commit('setGoodsIds', this.goodsListIds)
				this.$store.commit('setTotalPrice', this.totalPrice)
				uni.navigateTo({
					url: '/pages/order/order'
				})
			},
			//检查库存
			async checkStore(idList) {
				const db = uniCloud.database();
				let res = await db.collection('opendb-mall-goods').where({
					_id: db.command.in(idList)
				}).get()

				let store = {
					'has': true,
					'name': '',
					'count': 0
				}
				res.result.data.foreach(item => {
					console.log('store--------' + item.name);
					if (item.remain_count <= 100) {
						store.has = false
						store.name = item.name
					}
					return store
				})

				return store
			}
		},
	}
</script>


<style scoped>
	* {
		box-sizing: border-box;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	.settlement {
		height: 100rpx;
		width: 100%;
		display: flex;
		background-color: #fff;
		position: fixed;
		bottom: 0px;
		align-items: center;
	}

	.settlement button {
		width: 200rpx;
		height: 80rpx;
		border-radius: 36rpx;
		background: linear-gradient(to right, #ffb83d, #F22D00);
		text-align: center;
		line-height: 80rpx;
		color: #FFF;
		font-size: 36rpx;
		font-weight: bold;
	}

	.goods-name-box {
		height: 210rpx;
		width: 90%;
		overflow: hidden;
		word-wrap: break-word;
		margin-top: 10rpx;
	}

	.price-font-box {
		height: 90rpx;
		width: 90%;
		word-wrap: break-word;
		position: absolute;
		bottom: 0;
	}

	.dele-item {
		height: 60rpx;
		width: 60rpx;
		position: absolute;
		top: 0;
		left: 350rpx;
	}

	.header {
		width: 100%;
		height: 95rpx;
		background-color: #f9f9fc;
		position: fixed;
		top: 0px;
		z-index: 2;
		text-align: center;
		line-height: 95rpx;
		font-weight: bold;
		font-size: 18px;
	}

	.empty-cart {
		width: 710rpx;
		height: 600rpx;
		margin-top: 250rpx;
	}

	.yuan-font {
		color: #FF5000;
		font-size: 32rpx;
	}

	.price-box {
		height: 30%;
		width: 85%;
		word-wrap: break-word;
		position: absolute;
		bottom: 0rpx;
	}

	.price-font {
		font-size: 40rpx;
		color: #FF5000;
		font-family: Verdana;
	}

	.outer-box {
		background-color: #ffffff;
		width: 710rpx;
		margin: 0 auto 26rpx;
		border-radius: 18rpx;
		overflow: hidden;
	}

	.x1 {
		font-size: 32rpx;
		margin: 10rpx;
		width: 50rpx;
		height: 50rpx;
		border: #8a8a8a 1px solid;
		border-radius: 18rpx;
		display: inline-block;
		line-height: 50rpx;
		text-align: center;
	}

	/* 通知栏 */
	.notice-bar {
		top: 0;
		width: 750rpx;
		position: fixed;
		z-index: 9999;
	}
</style>